<template>
  <div class="rankingList">
    <div class="rankingList-inner">
      <el-tabs v-model="active" type="card" @tab-click="switchActive(active)">
        <el-tab-pane label="任务完成度" name="1">
          <div class="content">
            <div class="content-inner">
              <ul class="title">
                <li>排名</li>
                <li>成员</li>
                <li>部门</li>
                <li>完成度</li>
              </ul>
              <div class="details" v-if="taskComplete.length>0">
                <ul class="list" v-for="(item,index) in taskComplete" :key="index">
                  <li>
                    {{index+1}} <i class="ic_champion"></i></li>
                  <li>
                    <span v-if="!item.headImage" :class="['head-img','default']"></span>
                    <span v-if="item.headImage" class="head-img" :style="{backgroundImage: 'url(\''+ (encodeURI(item.headImage)) +'\')' }" ></span>
                    {{item.userName}}</li>
                  <li>{{item.departmentName}}</li>
                  <li>{{item.taskCompleteRate}}%</li>
                </ul>
              </div>
              <div class="defaultPage-smart" v-if="taskComplete.length==0">
                <div class="box">
                  <img src="../../../assets/img/defaultPage/pic_zwsj.png" alt="">
                  <p>暂无数据</p>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="工作强度" name="2">
          <div class="content">
            <div class="content-inner">
              <ul class="title">
                <li>排名</li>
                <li>成员</li>
                <li>部门</li>
                <li>任务数</li>
              </ul>
              <div class="details" v-if="taskIntensity.length>0">
                <ul class="list" v-for="(item,index) in taskIntensity" :key="index">
                  <li>{{index+1}} <i class="ic_champion"></i></li>
                  <li>
                    <span v-if="!item.headImage" :class="['head-img','default']"></span>
                    <span v-if="item.headImage" class="head-img" :style="{backgroundImage: 'url('+ item.headImage +')'}"></span>{{item.userName}}</li>
                  <li>{{item.departmentName}}</li>
                  <li>{{item.taskNum}}</li>
                </ul>
              </div>
              <div class="defaultPage-smart" v-if="taskIntensity.length==0">
                <div class="box">
                  <img src="../../../assets/img/defaultPage/pic_zwsj.png" alt="">
                  <p>暂无数据</p>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="任务逾期" name="3">
          <div class="content">
            <div class="content-inner">
              <ul class="title">
                <li>排名</li>
                <li>成员</li>
                <li>部门</li>
                <li>任务数</li>
              </ul>
              <div class="details" v-if="taskOverdue.length>0">
                <ul class="list" v-for="(item,index) in taskOverdue" :key="index">
                  <li>{{index+1}} <i class="ic_champion"></i></li>
                  <li>
                    <span v-if="!item.headImage" :class="['head-img','default']"></span>
                    <span v-if="item.headImage" class="head-img" :style="{backgroundImage: 'url('+ item.headImage +')'}"></span>{{item.userName}}</li>
                  <li>{{item.departmentName}}</li>
                  <li>{{item.taskNum}}</li>
                </ul>
              </div>
              <div class="defaultPage-smart" v-if="taskOverdue.length==0">
                <div class="box">
                  <img src="../../../assets/img/defaultPage/pic_zwsj.png" alt="">
                  <p>暂无数据</p>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <loading v-if="is_show_loading"></loading>
  </div>
</template>

<script>
  import loading from '@/components/loading'
  export default {
    name: "RankingList",
    components: {
      loading
    },
    data() {
      return {
        is_show_loading:true,
        active: '1',//1:任务完成度 2：工作强度 3 任务逾期
        taskOverdue: [],//任务逾期
        taskIntensity:[],//工作强度
        taskComplete:[],//任务完成度
        last_month: '',//上一个月
        year: '',//当前年
      }
    },
    created() {
      this.year = new Date().Format('yyyy');
      this.last_month = new Date().Format('MM');
      this.getTaskOverdue();
      this.getTaskIntensity();
      this.getTaskComplete();
    },
    methods: {
      switchActive() {

      },
      //获取排行榜：//任务逾期
      getTaskOverdue() {
        this.$http.get('/task/task/count/taskOverdue', {
          params: {
            companyId: this.$store.state.userInfo.companyId,
            month: this.last_month,
            year: this.year,
          }
        }).then(res => {
          if (res.statusCode == 200) {
            this.taskOverdue = res.data;
          } else {
            this.$message.error(res.statusMsg);
          }
        });
      },
      //获取排行榜，工作强度
      getTaskIntensity() {
        this.$http.get('/task/task/count/taskIntensity', {
          params: {
            companyId: this.$store.state.userInfo.companyId,
            month: this.last_month,
            year: this.year,
          }
        }).then(res => {
          if(res.statusCode==200){
            this.taskIntensity=res.data;
          }else{
            this.$message.error(res.statusMsg);
          }
        });
      },
      //获取排行榜：//任务完成度
      getTaskComplete(){
        this.$http.get('/task/task/count/taskComplete', {
          params: {
            companyId: this.$store.state.userInfo.companyId,
            month: this.last_month,
            year: this.year,
          }
        }).then(res => {
          if (res.statusCode == 200) {
            this.taskComplete = res.data;
            setTimeout(() => {
              this.is_show_loading=false;
            },1000)
          } else {
            this.$message.error(res.statusMsg);
          }
        });
      },
    },
  }
</script>

<style scoped type="text/scss" lang="scss">
  .rankingList {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    border-radius: 6px;
    padding: 24px 24px 32px 24px;

    .rankingList-inner {
      width: 100%;
      height: 100%;

      .content {
        margin-top: 17px;
        width: 100%;
        height: calc(100% - 24px);
        background-color: #F2F6F9;
        position: relative;

        .content-inner {
          width: 960px;
          height: calc(100% - 32px - 32px);
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          background-color: #ffffff;

          .title {
            display: flex;
            font-size: 14px;
            color: #96A2AA;
            line-height: 65px;
            border-bottom: 1px solid #F2F6F9;
            padding: 0 40px;

            li {
              float: left;
            }

            li:nth-child(1) {
              width: 218px;
            }

            li:nth-child(2) {
              width: 282px;
            }

            li:nth-child(3) {
              width: 270px;
            }

            li:nth-child(4) {
              width: 105px;
            }
          }

          .details {
            height: calc(100% - 65px);
            overflow-y: auto;

            .list {
              width: 100%;
              line-height: 64px;
              padding: 0 40px;
              overflow: hidden;

              > li {
                float: left;
                position: relative;
                .head-img{
                  width: 24px;
                  height: 24px;
                  background-size: cover;
                  background-repeat: no-repeat;
                  background-position: center;
                  display: inline-block;
                  margin-right: 16px;
                  border-radius: 50%;
                  vertical-align: middle;
                }
                .default{
                  background-image: url("../../../assets/img/rankingList/ic_phb_tx.png");
                }
              }

              li:nth-child(1) {
                width: 218px;
              }

              li:nth-child(2) {
                width: 282px;
              }

              li:nth-child(3) {
                width: 270px;
              }

              li:nth-child(4) {
                /*width: 99px;*/
              }
            }

            .list:nth-child(1) {
              li:nth-child(1) {
                > i {
                  width: 16px;
                  height: 16px;
                  display: inline-block;
                  background-image: url("../../../assets/img/rankingList/ic_champion.png");
                  background-size: cover;
                  background-position: center;
                  position: absolute;
                  top: 24px;
                  left: 60px;
                }
              }

              li:nth-child(4) {
                color: #0A52E4;
              }
            }

            .list:nth-child(2) {
              li:nth-child(1) {
                > i {
                  width: 16px;
                  height: 16px;
                  display: inline-block;
                  background-image: url("../../../assets/img/rankingList/ic_second.png");
                  background-size: cover;
                  background-position: center;
                  position: absolute;
                  top: 24px;
                  left: 60px;
                }
              }

              li:nth-child(4) {
                color: #0A52E4;
              }
            }

            .list:nth-child(3) {
              li:nth-child(1) {
                > i {
                  width: 16px;
                  height: 16px;
                  display: inline-block;
                  background-image: url("../../../assets/img/rankingList/ic_third.png");
                  background-size: cover;
                  background-position: center;
                  position: absolute;
                  top: 24px;
                  left: 60px;
                }
              }

              li:nth-child(4) {
                color: #0A52E4;
              }
            }
          }

          .details::-webkit-scrollbar {
            display: none
          }
        }
      }
    }
  }
</style>
<style type="text/scss" lang="scss">
  .rankingList {
    .el-tabs--card {
      height: 100%;

      .el-tabs__content {
        height: calc(100% - 41px);

        .el-tab-pane {
          height: 100%;
        }
      }
    }

    .el-tabs__item {
      color: #96A2AA;
    }

    .el-tabs__item.is-active {
      color: #454A55;
    }
  }
</style>
